<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login Form by Tooplate</title>
    <!--
    Template 2105 Input
    http://www.tooplate.com/view/2105-input
    -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/tooplate.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>
</head>

<body id="login">
<div class="container">
    <div class="row tm-register-row tm-mb-35">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-login-l">
            <div id="errorMsg" class="alert alert-danger" style="display: none"></div>
            <form id="infoForm" method="post" class="tm-bg-black p-5 h-100">
                <input type="hidden" id="uid" name="uid"/>
                <div class="input-field">
                    <input id="username" name="username" type="text" class="validate">
                    <span><label class="error" for="username" style="display: none;"></label></span>
                </div>
                <div class="input-field">
                    <input id="name" name="name" type="text" class="validate">
                    <span><label class="error" for="name" style="display: none"></label></span>
                </div>
                <div class="input-field">
                    <input id="telephone" name="telephone" type="text" class="validate">
                    <span><label class="error" for="telephone" style="display: none"></label></span>
                </div>
                <div class="input-field">
                    <input id="email" name="email" type="email" class="validate">
                    <span><label class="error" for="email" style="display: none"></label></span>
                </div>
                <div class="tm-flex-lr">
                    <input type="button" id="updateButton"
                           class="waves-effect btn-large btn-large-white px-4 black-text rounded-0" value="modify"/>
                    <input id="deleteBtn" onclick="confirmDelete()"  type="button"
                           class="waves-effect btn-large btn-large-white px-4 black-text rounded-0" value="delete"/>
                </div>
            </form>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-login-r">
            <header class="font-weight-light tm-bg-black p-5 h-100">
                <h3 class="mt-0 text-white font-weight-light">Your Login</h3>
                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                <p class="mb-0">Vestibulum neque neque, porttitor quis lacinia eu, iaculis id dui. Mauris quis velit
                    lectus.</p>
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 ml-auto mr-0 text-center " >
                        <a style="margin-left: -210px;margin-top: 114px;" href="register.html" class="waves-effect btn-large btn-large-white px-4 black-text rounded-0">Register</a>
                    </div>
                </div>
            </header>
        </div>
    </div>

    <footer class="row tm-mt-big mb-3">
        <div class="col-xl-12 text-center">
            <p class="d-inline-block tm-bg-black white-text py-2 tm-px-5">
                Copyright &copy; 2018 Company Name

                - <a rel="nofollow" href="http://www.tooplate.com/view/2105-input">Input</a> by
                <a rel="nofollow" href="http://tooplate.com" class="tm-footer-link">Tooplate</a>
            </p>
        </div>
    </footer>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
    $(function () {
        var uid = getParameter("uid");
        $.get("/photograph/user/getUser", {uid: uid},
            function (data) {
                $("#uid").val(data.data.uid)
                $("#username").val(data.data.username)
                $("#name").val(data.data.name)
                $("#telephone").val(data.data.telephone)
                $("#email").val(data.data.email)
            }, "json");

        $("#updateButton").click(function () {
            // 表单验证通过才要注册
            var isPass = $("#infoForm").valid();
            if (!isPass) {
                return;
            } else {
                // $.post("/photograph/user/updateInfo", $("#infoForm").serialize(),
                //     function (data) {
                //         if (data.flag) {
                //             alert("information update success")
                //             location.href = "index.html"
                //         }
                //     }, "json");
                confirmUpdate();
            }
        })

            $("#infoForm").validate({
                rules: {
                    username: {
                        required: true,
                        // 正则表达式
                        checkUsername: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    name: {
                        required: true
                    },
                    telephone: {
                        required: true
                    }

                },
                messages: {
                    username: {
                        required: "用户名不能为空",
                        checkUsername: "必须是字母开头,至少6位"
                    },
                    email: {
                        required: "邮箱不能为空",
                        email: "请输入正确的邮箱格式"
                    },
                    name: {
                        required: "名字不能为空"
                    },
                    telephone: {
                        required: "联系方式不能为空"
                    },
                }
            });
            // 判断用户名格式是否规范
            $.validator.addMethod("checkUsername",
                function (value, element, params) {
                    var reg = /^[a-zA-Z_]\w{5,15}$/;
                    return reg.test(value);
                });
            // 判断用户密码格式是否正确
            $.validator.addMethod("checkPassword",
                function (value, element, params) {
                    var reg = /^[a-zA-Z_]\w{5,15}$/;
                    return reg.test(value);
                });
            })

        // 更新的确认弹窗
        function confirmUpdate() {
            var mymessage = confirm('确认要修改么？')
            if(mymessage == true) {
                updateInfo();
            } else {
                return;
            }
        }

        // 更新用户信息
        function updateInfo() {
            $.post("/photograph/user/updateInfo",$("#infoForm").serialize(),
                function (data) {
                    if (data.flag) {
                        location.href = "index.html"
                    }
                },"json");
        }

        // 删除用户功能
        function deleteUser() {
            $.post("/photograph/user/deleteUser",$("#infoForm").serialize(),
                function (data) {
                    if (data.flag) {
                        location.href = "index.html"
                    }
                },"json");
        }

        // 删除的确认弹窗
        function confirmDelete() {
            var mymessage = confirm('确认要删除么？')
            if(mymessage == true) {
                deleteUser();
            } else {
                return;
            }
        }
</script>
</body>

</html>